<template>
	<view>
		<view class="input-box">
			<view class="input-item">
				<view class="input-label">账户</view>
				<view class="input-body">
					<input v-model="user" style="margin-right: 160upx;" placeholder="请输入账号" class="input">
					<!-- <button :disabled="!isCanSendCode" class="btn-code"  @click="sendCode">{{sendMsg}}</button> -->
				</view>
			</view>
			<view class="input-item">
				<view class="input-label">密码</view>
				<view class="input-body">
					<input v-model="password" type="text" :password="isHidePassword?true:false"
						style="margin-right: 50upx;" placeholder="请输入密码" maxlength="20" class="input" />
					<image @click="isHidePasswordClick" class="eye"
						:src="isHidePassword?'/static/img/attention.png':'/static/img/attention_forbid.png'"></image>
				</view>
			</view>
			<view class="input-item">
				<view class="input-label">姓名</view>
				<view class="input-body">
					<input v-model="name" style="margin-right: 160upx;" placeholder="请输入姓名" class="input">
				</view>
			</view>
			<view class="input-item">
				<view class="input-label">电话</view>
				<view class="input-body">
					<input v-model="phone" maxlength="11" type="number" style="margin-right: 160upx;"
						placeholder="请输入手机号" class="input">
				</view>
			</view>
			<view class="input-item">
				<view class="input-label">验证码</view>
				<view class="input-body">
					<input placeholder="请输入验证码" v-model="code" maxlength="4" class="input">
					<image :src="codeImg" mode="heightFix" @click="getVCode"></image>
				</view>
			</view>

		</view>
		<button class="button" @click="submit">注册</button>
	</view>
</template>

<script>
	let timer = '';
	import {
		checkPhone,
		checkPwd,
		checkCode
	} from "@/common/common.js"
	import {
		getVerifyCode,
		userRegister
	} from "@/common/request.js"

	export default {
		data() {
			return {
				sendMsg: "发送验证码",
				isCanSendCode: true,
				isHidePassword: true,
				phone: "",
				name: "",
				password: "",
				code: "", // 验证码
				user: "",
				codeImg: ''
			};
		},
		methods: {
			isHidePasswordClick() {
				this.isHidePassword = !this.isHidePassword
			},
			setCodeInterval() {
				//设置验证码重新发送定时器
				let time = 60;
				clearInterval(timer);
				timer = setInterval(() => {
					time--;
					this.isCanSendCode = false;
					this.sendMsg = time + "s"
					if (time <= 0) {
						this.isCanSendCode = true;
						this.sendMsg = "重新获取";
						clearInterval(timer);
					}
				}, 1000)
			},
			clearCodeInterval() {
				clearInterval(timer);
				this.codemsg = "获取验证码";
			},
			sendCode() {
				//发送验证码
				if (!checkPhone(this.phone)) {
					return
				}
				this.setCodeInterval();
				/*
				 * 发送验证码逻辑
				 */
			},
			submit() {
				if (!this.user || !this.code || !this.name || !this.phone || !this.password) {
					uni.showToast({
						icon: 'none',
						duration: 1500,
						title: '请填写完整内容'
					})
					return;
				}
				if (!checkPhone(this.phone)) {
					return;
				};
				if (!checkPwd(this.password)) {
					return;
				};

				// 注册逻辑
				userRegister({
					username: this.user,
					password: this.password,
					verifyCode: this.code,
					telephone: this.phone,
					name: this.name,
					// token
				}).then(res => {
					uni.showToast({
						icon: 'none',
						duration: 1000,
						title: "注册成功"
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/about/About'
						})
					}, 1000)
				})

				// this.$store.commit('update', ['isLogin', true]);
				// uni.reLaunch({
				// 	url: '/pages/index/index'
				// })
			},
			// 获取验证码
			getVCode() {
				let that = this
				const token = this.$store.state.session
				console.log(token);
				uni.downloadFile({
					url: 'https://www.jiangsujishan.com/api/system/getCode.open',
					header: {
						'Cookie': `JSESSIONID=${token}` //权限token 
					},
					success: (res) => {
						that.codeImg = res.tempFilePath
					}
				});

			}
		},
		created() {
			this.getVCode()
		}
	}
</script>

<style lang="scss">
	.input-box {
		.input-body {
			image {
				margin-top: 20rpx;
				margin-left: 200rpx;
				height: 100rpx;
			}
		}
	}

	.button {
		margin-top: 80rpx;
	}
</style>
